﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery自定义添加或删除标签获取ID代码</title>
    <link rel="stylesheet" type="text/css" href="css/layui.css">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            color: #444;
            background: #f2f2f2;
        }
        
        * {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
            text-decoration: none;
        }
        
        .wrap {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .label-selected {
            width: 100%;
            min-height: 46px;
            margin: 10px 0;
            border: 1px solid #ccc;
            background-color: #fff;
            position: relative;
        }
        
        .cell {
            display: block;
            width: 90px;
            height: 28px;
            line-height: 28px;
            border: 3px;
            background: #009688;
            color: #fff;
            text-align: center;
        }
        
        .label-selected li {
            display: inline-block;
            height: 27px;
            line-height: 27px;
            font-size: .8rem;
            padding: 0 1rem;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            cursor: pointer;
            margin: 4px 2px;
            color: #666;
        }
        
        #labelItem {
            margin-bottom: 10px;
            display: none;
        }
        
        .label-item {
            border: 1px solid #e6e6e6;
            padding: 10px;
            border-radius: 0 2px 2px 0;
            position: relative;
            overflow: hidden;
            background: #fff;
        }
        
        .label-item li {
            display: inline-block;
            height: 27px;
            line-height: 27px;
            font-size: .8rem;
            padding: 0 1rem;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            cursor: pointer;
            margin-bottom: 5px;
            margin-left: 2px;
            color: #666;
        }
        
        .label-item .selected {
            color: #ccc;
        }
        
        .btn {
            float: right;
            margin: 4px;
            line-height: 30px;
        }
        
        #d {
            width: 200px;
            height: 40px;
            background-color: #eeeeee;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            margin: 0 auto;
            display: none;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <div class="label-selected" id="sel">
            <a href="javascript:;" class="layui-btn btn" id="btn">展开标签库</a>
        </div>
        <div class="layui-col-md12" id="labelItem">
            <!--标签库-->
            <div class="label-item">
                <li data-id="2"><span>java 教程</span></li>
                <li data-id="16"><span>SEM</span></li>
                <li data-id="17"><span>SEM基础</span></li>
                <li data-id="6"><span>柚说</span></li>
                <li data-id="18"><span>关键词</span></li>
                <li data-id="19"><span>创意</span></li>
                <li data-id="10"><span>公众号</span></li>
                <li data-id="20"><span>排名</span></li>
                <li data-id="12"><span>网络营销</span></li>
                <li data-id="13"><span>SEM</span></li>
                <li data-id="14"><span>网络推广</span></li>
                <li data-id="15"><span>达内</span></li>
                <li data-id="21"><span>效果</span></li>
                <li data-id="22"><span>数据</span></li>
                <li data-id="23"><span>SEO</span></li>
                <li data-id="24"><span>DSP</span></li>
                <li data-id="25"><span>百度网盟</span></li>
                <li data-id="26"><span>百度DSP</span></li>
                <li data-id="27"><span>广点通</span></li>
                <li data-id="28"><span>智慧推</span></li>
                <li data-id="29"><span>粉丝通</span></li>
                <li data-id="30"><span>新媒体</span></li>
                <li data-id="31"><span>微信</span></li>
                <li data-id="32"><span>微博</span></li>
                <li data-id="33"><span>问答</span></li>
                <li data-id="34"><span>百科</span></li>
                <li data-id="35"><span>博客</span></li>
                <li data-id="36"><span>ASO</span></li>
                <li data-id="37"><span>网站</span></li>
                <li data-id="38"><span>着陆页</span></li>
                <li data-id="39"><span>网站分析</span></li>
                <li data-id="40"><span>电商</span></li>
                <div id="d">最多选择8个</div>
            </div>
        </div>
    </div>
    <script>
        //1. 点击‘展开标签库’按钮,显示所有标签,按钮文字变成‘收起标签库’
        //2. 点击‘收起标签库’按钮,隐藏所有标签,按钮文字变成‘展开标签库’
        //3. 点击任意一个标签，标签的颜色变成 ‘#2bb8aa’
        //4. 点击已变色的标签，标签颜色还原

        var btn = document.getElementById('btn'); //1.找到展开收起按钮绑定单击事件
        var div = document.getElementById('labelItem'); // 2.找到要显示隐藏的div
        var count = 0; //计数器

        btn.onclick = function() {
            if (this.innerHTML == '展开标签库') {
                this.innerHTML = '收起标签库';
                div.style.display = 'block';
            } else {
                this.innerHTML = '展开标签库';
                div.style.display = 'none';
            }
        }

        var lis = div.getElementsByTagName('li'); //3.找到所有的li循环绑定单击事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                //根据背景颜色判断添加还是取消
                if (this.style.background) {
                    // 有颜色
                    this.style.background = '';
                    count--;
                } else {
                    //没有颜色
                    if (count < 8) { //最多只能添加8个
                        this.style.background = 'pink';
                        count++;
                    }
                }
            }
        }
    </script>
</body>

</html>